<!-- banner管理 -->
<template>
    <div class="app-container">
        <!--*********************************检索条件**************************************-->
        <el-form :inline="true" :model="bannerGroupVo" class="demo-form-inline">
            <el-form-item label="分组名">
                <el-input clearable v-model="bannerGroupVo.title" placeholder="分组名"></el-input>
            </el-form-item>
            <el-form-item label="是否是目前展示的">
                <el-select v-model="bannerGroupVo.isShow" clearable placeholder="请选择">
                    <el-option label="是" value="true"></el-option>
                    <el-option label="否" value="false"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="创建时间">
                <el-date-picker
                    v-model="beginEndTime"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getBannerGroup()">查询</el-button>
            </el-form-item>
            <br />
            <el-form-item>
                <el-button type="success" @click="openDialog()">添加</el-button>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="danger"
                    :disabled="deleteBatchButton"
                    @click="removeCourseByIds(multipleSelection)"
                >批量删除</el-button>
            </el-form-item>

            <el-form-item>
                <el-popover
                    placement="top-start"
                    title="警告"
                    width="200"
                    trigger="hover"
                    content="谨慎操作，主要同步对当前正在展示banner的修改"
                >
                    <el-button type="warning" slot="reference" @click="refresh()">同步更新</el-button>
                </el-popover>
            </el-form-item>
        </el-form>
        <!--*********************************表格数据**************************************-->
        <el-table
            :data="bannerGroups"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" :selectable="chaeckIsSelect"></el-table-column>
            <el-table-column prop="title" label="标题" width="200"></el-table-column>
            <el-table-column label="创建时间" width="200">
                <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述"
                :show-overflow-tooltip="true"
                width="200"
            ></el-table-column>
            <el-table-column label="是否展示" width="200" align="center">
                <template slot-scope="scope">
                    <el-switch
                        @change="showGroup(scope.row.id)"
                        v-model="scope.row.isShow"
                        :disabled="scope.row.isShow"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openDialog(scope.row.id)">修改</el-button>
                    <el-button
                        type="info"
                        size="small"
                        @click="$router.push({
                        name: 'BannerInfo',
                        params: { 'id': scope.row.id }
                    })"
                    >详情</el-button>
                    <el-button
                        v-if="!scope.row.isShow"
                        type="danger"
                        size="small"
                        @click="removeCourseByIds([scope.row.id])"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--*********************************添加或修改分组对话框**************************************-->
        <el-dialog title="分组" :visible.sync="dialogFormVisible" width="30%" @close="closeDialog()">
            <el-form :model="group">
                <el-form-item label="分组名">
                    <el-input v-model="group.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="group.description "
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdateGroup()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
    getBannerGroup,
    deleteBannerGroupsByIds,
    getGroupById,
    saveOrUpdateGroup,
    showGroup,
} from "@/api/cms/bannerGroup";

import { refreshChangedShowBanner } from "@/api/cms/banner";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            bannerGroupVo: {
                title: "",
                isShow: "",
                beginTime: "",
                endTime: "",
            },
            group: {},
            beginEndTime: "",
            bannerGroups: [],
            multipleSelection: [],
            dialogFormVisible: false, //对话框是否显示
        };
    },
    //监听属性 类似于data概念
    computed: {
        deleteBatchButton() {
            return this.multipleSelection.length === 0;
        },
    },
    //监控data中的数据变化
    watch: {
        beginEndTime(newValue, oldValue) {
            if (newValue) {
                this.bannerGroupVo.beginTime = newValue[0];
                this.bannerGroupVo.endTime = newValue[1];
            } else {
                this.bannerGroupVo.beginTime = "";
                this.bannerGroupVo.endTime = "";
            }
        },
    },
    //方法集合
    methods: {
        getBannerGroup() {
            getBannerGroup(this.bannerGroupVo).then((response) => {
                this.bannerGroups = response.data.groups;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = [];
            for (var i = 0; i < val.length; i++) {
                this.multipleSelection.push(val[i].id);
            }
        },
        removeCourseByIds(ids) {
            this.$confirm("确定要删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteBannerGroupsByIds(ids).then((response) => {
                        this.getBannerGroup();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    });
                })
                .catch(() => {});
        },
        //检测某一行是否可以选择
        chaeckIsSelect(row, index) {
            if (row.isShow) {
                return false;
            }
            return true;
        },
        showGroup(id) {
            showGroup(id).then((response) => {
                this.getBannerGroup();
                this.$message({
                    message: "成功",
                    type: "success",
                });
            });
        },
        openDialog(id) {
            if (id) {
                getGroupById(id).then((response) => {
                    this.group = response.data.group;
                });
            }
            this.dialogFormVisible = true;
        },
        saveOrUpdateGroup() {
            saveOrUpdateGroup(this.group).then((response) => {
                this.getBannerGroup();
                this.closeDialog();
                this.$message({
                    message: "成功",
                    type: "success",
                });
            });
        },
        closeDialog() {
            this.group = {};
            this.dialogFormVisible = false;
        },
        refresh() {
            this.$confirm("确定要同步更新吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    refreshChangedShowBanner().then((response) => {
                        this.$message({
                            type: "success",
                            message: "同步成功!",
                        });
                    });
                })
                .catch(() => {});
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getBannerGroup();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
</style>